<template>
  <h1 style="font-size: 4vw;">{{params.catid}}</h1>
    <el-breadcrumb separator="/" class="bread">
        <el-breadcrumb-item><el-link :underline="false" @click="router.push('/index')">首页</el-link></el-breadcrumb-item>
        <el-breadcrumb-item><el-link :underline="false" @click="router.push('/categories')">categories</el-link></el-breadcrumb-item>
        <el-breadcrumb-item>{{params.catid}}</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="pro-info" v-show="obj.isShow" >
      <div v-for="item in obj.proList" class="pro-item">
          <img :src="item.descn" alt="{{item.name}}"/>
          <el-link :underline="false" class="link" @click="router.push(`/categories/${item.category}/${item.productid}`)">{{item.name}}</el-link>
      </div>
  </div>

</template>

<script lang="ts" setup>
  import { useRoute } from "vue-router";
  import {get,put_form} from '@/assets/ts/ruquestMethod'
  import {onBeforeMount, onMounted, reactive} from "vue";
  import router from "@/router";

  const {query,params} = useRoute()
  const loginName = sessionStorage.getItem('loginName')
  console.log(loginName)
  let obj = reactive({
      isShow : false,
      proList : ''
  })
  get('/products/'+params.catid,
      (data:any) =>{
        if(data.status === 1){
            obj.proList = data.data
            obj.isShow = true
        }
      }
  )
onMounted(()=>{
    if(loginName != null){
        put_form(`/banners/${loginName}/${params.catid}`,
            {},
            ()=>{

            }
          )
    }
})
</script>

<style scoped>
  .bread{
      margin-left: 15%;
      margin-bottom: 20px;
  }
  .pro-info{
      width: 70%;
      margin-left: 15%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
  }
  .pro-item{
      border-radius: 5%;
      text-align: center;
      width: 23%;
      margin-right: 2%;
      margin-bottom: 20px;
  }
  .pro-item:hover{
      background-color: #E5EAF3;
      /* border: solid 1px gray; */
      box-shadow: var(--el-box-shadow);
      /*border-style: solid;*/
      /*border-color: #CDD0D6;*/
      transition: 0.5s;
  }
  .pro-item img{
      margin-top: 5%;
      /*margin-bottom: 5%;*/
      margin-left: 5%;
      width: 80%;
      height: 80%;
      border-radius: 10%;
      display: flex;
      flex-direction: column;
  }
  .link{
      margin-left: 5%;
      float: left;
      font-size: 20px;
      font-weight: bold;

  }

</style>